<h1 mat-dialog-title>Configurator for node {{name}}</h1>

<div class="modal-form-container">
    <div class="content">
        <div class="default-content" *ngIf="node">
            <mat-card class="matCard">
                <form [formGroup]="inputForm">
                    <mat-form-field class="form-field">
                        <input 
                            matInput type="text" 
                            [(ngModel)]="node.name" 
                            formControlName="name"
                            placeholder="Name">
                    </mat-form-field>
                    <mat-form-field class="select">
                        <mat-select 
                            placeholder="Console type" 
                            [ngModelOptions]="{standalone: true}" 
                            [(ngModel)]="node.console_type">
                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
                                {{type}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </form>
                <app-ports *ngIf="node.properties" #ports [ethernetPorts]="node.properties.ports_mapping"></app-ports>
            </mat-card>
        </div>
    </div>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>
